import React from 'react';
import TimeForm from './TimeForm';
class TogglesbleTimerForm extends React.Component {
    constructor() {
        super();
        this.handleFormOpen = this.handleFormOpen.bind(this)
    }
    state={
        isOpen: false
    }
    handleFormOpen =()=>{
        this.setState(
            {
                isOpen:true
            }
        )
    }
    handleFormSubmit = (timer)=>{
        this.props.onFormSubmit(timer);
        this.setState({isOpen:false})
    }
    handleFormCancle = ()=>{
        this.setState(
            {
                isOpen:false
            }
        )
    }
    render() {
        if (this.state.isOpen){
            return (
                <TimeForm onFormSubmit={this.handleFormSubmit} onFromCancle={this.handleFormCancle}/>
            )
        }else{
            return(
                <div className="">
                    <button onClick={this.handleFormOpen}>
                        <i className='plus icon'>+</i>
                    </button>
                    <button onClick={this.handleFormOpen}>
                        <i className='plus icon'>-</i>
                    </button>
                </div>
            )
        }

    }
}

export default TogglesbleTimerForm;